<template>
    <div class="box">
        <template v-if="roleInfo">
            <header>
                <div class="left">
                    <div class="iconBox"></div>
                    <div class="infoBox">
                        <h3>{{ roleInfo!.rolename }}</h3>
                        <p>{{ roleInfo!.remark }}</p>
                    </div>
                </div>
            </header>
            <main>
                <el-tree :data="limits" show-checkbox node-key="path" :default-checked-keys="roleInfo.authority"
                    :props="{ label: (data: RouteRecordRaw) => data.meta?.label }" default-expand-all
                    @check="selectLimit" />
                <el-button type="primary" @click="save">保存</el-button>
            </main>
        </template>
        <template v-else>
            <Loading></Loading>
        </template>
    </div>
</template>

<script setup lang="ts">
import Loading from '@/components/Loading.vue'

import { reqGetRoleInfo } from '@/api/common';
import { roleType } from '@/types/role';
import { computed, onMounted, ref } from 'vue';
import { RouteRecordRaw, useRoute } from 'vue-router';
import { routes } from '@/router';
import { reqEditRole } from '@/api/common';
import { tip } from '@/utils/alert';
const roleInfo = ref<roleType>()
const route = useRoute()
const limits = computed(() => {
    return routes[1].children!.filter(item => item.path != '/noLimit' && item.path != '/dataView')
})
const selectLimit = (__: any, node: any) => {
    roleInfo.value!.authority = [...node.checkedKeys]
    console.log(node);
    
}
const getRoleInfo = (roleid: number) => {
    reqGetRoleInfo(roleid).then(res => {
        roleInfo.value = res.data.data
        let a=roleInfo.value?.authority as string
        if(roleInfo.value?.authority){
            roleInfo.value!.authority=a.split(',')
        }else{
            roleInfo.value!.authority=[]
        }
    })
}
const save = () => {
    let temp=roleInfo.value?.authority as string[]
    let tempRoleInfo={...roleInfo.value}
    tempRoleInfo.authority=temp.join(',')
    console.log(tempRoleInfo);

    reqEditRole(tempRoleInfo as roleType).then(res => {
        tip(res.data.info, 'success')
    })
}
onMounted(() => {
    getRoleInfo(route.query.roleid as any)
})
</script>

<style scoped lang="scss">
.box {
    min-width: 1400px;

    header {
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        height: 120px;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            .iconBox {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 90px;
                width: 90px;
                border-radius: 50%;
                background-color: #fb6260;
            }

            .infoBox {
                margin-left: 15px;

                h3 {
                    color: #6b6666;
                    font-size: 20px;
                    font-weight: bold;
                }

                p {
                    margin-top: 10px;
                    color: #999999;
                    font-size: 14px;
                }
            }
        }
    }

    main {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;

        :deep(.el-tree-node__children) {
            display: flex;
        }

        .el-button {
            position: relative;
            left: calc(50% - 200px);
            margin-left: -200px;
            margin: 20px auto;
            width: 400px;
        }
    }

}
</style>